/*
 * @Author: Jhinwins 
 * @Date: 2018-03-17 09:51:04 
 * @Last Modified by: Jhinwins
 * @Last Modified time: 2018-04-13 22:43:56
 */
import React, { PureComponent } from "react";
import { Row, Col, Divider, Breadcrumb, Pagination, Input, Button } from "antd";
import "antd/dist/antd.css";
import { Link } from "react-router-dom";
import "../common/resItem.css";
import Req from "../common/Req";

export default class ColumnPage extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
      keyword: ""
    };
  }

  /**加载数据 */
  loadDatas(floorid, keyword, pageIndex, pageSize) {
    Req(
      `http://localhost:8080/products/floor?floorid=${floorid}&keyword=${keyword}`,
      {},
      this.props.history,
      resp => this.setState({ products: resp.data })
    );
  }
  componentDidMount() {
    const { floorid, keyword } = this.props.location.state;
    this.loadDatas(floorid, keyword);
  }

  render() {
    return (
      <div>
        {/*-----------------------HEADER---------------------------------*/}
        <div>
          <Row
            style={{
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover",
              backgroundImage:
                'url("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3080292925,4188312909&fm=27&gp=0.jpg")'
            }}
          >
            <Col span={4} offset={18}>
              <Input.Search
                style={{ marginTop: 50, marginBottom: 50 }}
                placeholder="输入您想购买的商品"
                onSearch={value => console.log(value)}
              />
            </Col>
          </Row>
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to="/retailers/">Home</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>田径器材</Breadcrumb.Item>
          </Breadcrumb>
          <Divider />
          <div
            style={{
              background: "#D3DCE6",
              display: "flex",
              flexDirection: "row",
              justifyContent: "space-between"
            }}
          >
            <div
              style={{
                display: "flex",
                flexDirection: "row",
                alignItems: "center"
              }}
            >
              <span>排序：</span>
              <button style={{ marginLeft: 3 }}>销量⬇</button>
              <button style={{ marginLeft: 3 }}>评价⬇</button>
              <button style={{ marginLeft: 3 }}>人气⬇</button>
              <button style={{ marginLeft: 3 }}>上架时间⬇</button>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span>价格：</span>
              <Input size="small" style={{ width: 50 }} />
              <span>到</span>
              <Input size="small" style={{ width: 50 }} />
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span>关键字：</span>
              <Input
                onChange={e => this.setState({ keyword: e.target.value })}
                size="small"
                style={{ width: 150 }}
              />
              <button
                onClick={() =>
                  this.loadDatas(
                    this.props.location.statefloorid,
                    this.state.keyword
                  )
                }
              >
                搜索
              </button>
            </div>

            <div>
              <Pagination
                size="small"
                total={10}
                showTotal={(total, range) =>
                  `${range[0]}-${range[1]} of ${total} items`
                }
              />
            </div>
          </div>
        </div>
        {/*-----------------------HEADER---------------------------------*/}
        <div>
          <Row gutter={16}>
            {this.state.products.map((item, index) => (
              <Col span={4} key={index}>
                <ProductThumbnail data={item} />
              </Col>
            ))}
          </Row>
        </div>
      </div>
    );
  }
}

class ProductThumbnail extends PureComponent {
  render() {
    const { data } = this.props;
    return (
      <div
        className="resItem"
        style={{ background: "#ffffff", paddingTop: 0, paddingBottom: 20 }}
      >
        <Divider />
        <img
          style={{ width: "100%", height: 100 }}
          src={data.imgs[0] ? data.imgs[0].imgUrl : ""}
          alt={data.desc}
        />
        <div style={{ textAlign: "center" }}>
          <h4 style={{ color: "#D54A29" }}>${data.price}</h4>
          <h3>{data.name}</h3>
          <div>
            <Link
              to={{
                pathname: "/retailers/detail",
                state: {
                  productid: data.id
                }
              }}
            >
              {data.desc}
            </Link>
          </div>
          <Button>加入购物车</Button>
        </div>
      </div>
    );
  }
}
